<template>
  <flexbox class="xr-header">
    <flexbox style="width:50%">
      <div>
        <slot name="xr_l" />
      </div>
      <div v-if="showSearch">
        <el-input
          :placeholder="placeholder"
          v-model="search"
          v-bind="inputAttr"
          :class="{ 'is-text': searchIconType === 'text' }"
          class="xr-header__search"
          @input="inputChange"
          @keyup.enter.native="searchClick"
          clearable
        >
        </el-input>
        <el-button
          type="primary"
          @click="searchClick"
          icon="el-icon-search"
          class="ml-16"
          >搜索</el-button
        >
      </div>
    </flexbox>

    <div :style="{ top: ftTop }" class="xr-header__ft">
      <slot name="ft" />
    </div>
  </flexbox>
</template>

<script>
export default {
  // 公共列表搜索头部
  name: "XrHeader",
  components: {},
  // inheritAttrs: false,
  props: {
    iconClass: [String, Array],
    iconColor: String,
    label: String,
    // value: String,

    showSearch: {
      type: Boolean,
      default: false,
    },
    // 图标形式的搜索
    searchIconType: {
      type: String,
      default: "text", // icon
    },
    placeholder: {
      type: String,
      default: "请输入内容",
    },
    ftTop: {
      type: String,
      default: "15px",
    },

    content: [String, Number],

    inputAttr: {
      type: Object,
      default: () => {},
    },
  },
  data() {
    return {
      search: "",
    };
  },
  computed: {},
  watch: {
    content: {
      handler() {
        if (this.search != this.content) {
          this.search = this.content;
        }
      },
      immediate: true,
    },
  },
  methods: {
    inputChange() {
      this.$emit("update:content", this.search);
    },
    searchClick() {
      this.$emit("search", this.search);
    },
  },
};
</script>

<style lang="scss" scoped>
.xr-header {
  padding: 15px;
  justify-content: space-between;
  background: #ffffff;
  margin-bottom: 16px;
  &__icon {
    width: 30px;
    height: 30px;
    text-align: center;
    line-height: 30px;
    border-radius: $xr-border-radius-base;
    margin-right: 10px;
    .wk {
      color: white;
      font-size: 18px;
    }
  }
  &__label {
    font-size: 16px;
    color: #333333;
    font-weight: 600;
  }

  &__search {
    width: 200px;
  }

  &__search.is-text {
    /deep/ .el-input-group__append {
      background-color: $xr-color-primary;
      border-color: $xr-color-primary;
      color: white;
    }
  }

  &__ft {
    right: 15px;
  }
}
.ml-16 {
  margin-left: 16px;
}
</style>
